<template>
  <div class="flex flex-col justify-center items-center h-full p-12">
    <!-- 动画容器 -->
    <div class="spinner-container w-16 h-16">
      <!-- 红色小球 -->
      <div class="dot dot-red"></div>
      <!-- 白色小球 -->
      <div class="dot dot-white"></div>
    </div>
    <!-- 加载文案 -->
    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
      <slot>卖力加载中...</slot>
    </p>
  </div>
</template>

<script setup lang="ts">
// 这个组件纯粹是展示性的，不需要脚本逻辑
</script>

<style scoped>
/* 
  动画容器，它自身进行旋转，带动内部的小球
*/
.spinner-container {
  position: relative;
  animation: spinner-rotate 2s infinite linear;
}

/* 
  小球的通用样式
*/
.dot {
  width: 24px; /* 小球尺寸 */
  height: 24px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 
    使用 transform 将小球定位到容器的边缘。
    - translateX(-50%) / translateY(-50%) 是为了让小球的中心点对准容器中心。
    - translateY(-24px) 将小球向上移动（容器高度的一半 - 小球半径的一半，可以微调）
  */
  transform: translate(-50%, -50%) translateY(-24px);
  /* 
    每个小球都有自己的动画，实现“跳跃”或“交换位置”的效果
  */
  animation: dot-chase 2s infinite ease-in-out;
}

/* 
  定义颜色
*/
.dot-red {
  background-color: #fe2c55; /* 抖音红 */
}
.dot-white {
  background-color: #ffffff; /* 白色 */
  /* 
    让白色小球的动画延迟一半时间开始，
    这样它们就能形成追逐的效果
  */
  animation-delay: -1s;
}

/* 
  容器旋转动画：从 0 度转到 360 度
*/
@keyframes spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* 
  小球追逐动画：
  - 0%, 100%: 保持在初始位置（向上）
  - 25%: 移动到右侧
  - 50%: 移动到底部
  - 75%: 移动到左侧
  通过组合容器的旋转和小球自身的位移，就产生了复杂的追逐效果。
  这里我们简化一下，只做大小缩放和位置交换的动画，更接近你描述的效果。
*/
@keyframes dot-chase {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(-24px) scale(1);
  }
  50% {
    /* 动画中途，移动到相对的另一侧，并稍微缩小 */
    transform: translate(-50%, -50%) translateY(24px) scale(0.8);
  }
}
</style>
